<!DOCTYPE html>
<html>
<head>
	<title>Calculate Date Difference</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>Calculate Date Difference</h1>
	<p>Enter two dates and click the button to calculate the difference:</p>
	<input type="date" id="date1">
	<input type="date" id="date2">
	<button onclick="calculate()">Calculate</button>
	<p id="result"></p>

	<script>
		function calculate() {
			var date1 = new Date(document.getElementById("date1").value);
			var date2 = new Date(document.getElementById("date2").value);
			var diff = Math.abs(date1.getTime() - date2.getTime());
			var days = Math.ceil(diff / (1000 * 3600 * 24));
			document.getElementById("result").innerHTML = "The difference is " + days + " days.";
		}
	</script>
</body>
</html>